<!--  -->
<template>
  <div>
    <h1 class="title">收藏的视频<span class="album_count">({{count}})</span></h1>
    <div class="video_wrap">
      <el-row justify="center" :gutter="20">
        <el-col v-for="(item,index) in videoList" :key="index">
          <div class="item">
            <div class="cover">
              <el-image @click="toDetail(item.vid,item.type)" style="width: 100%; height: 100%;border-radius: 8px ;" :src="item.coverUrl" fit></el-image>
              <span class="count"><span class="iconfont el-icon-caret-right"></span> {{item.playTime>10000? Math.floor(item.playTime/10000)+'万':item.playTime}}</span>
              <span class="time">{{ item.durationms | timerFormat }}</span>
            </div>
            <div class="title iconfont" :class="{iconMV:item.type==0}">{{item.title}}</div>
            <div class="name">{{item.creator[0].userName}} </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="loginStatus!=='true'">
      <el-empty description="暂无收藏视频"></el-empty>
    </div>
  </div>
</template>

<script>
import { getVideoCollect } from 'util/collect.js'
import { mapGetters } from 'vuex'

export default {
  name: '',
  data() {
    return {
      count: 0,
      videoList: []
    }
  },
  computed: {
    ...mapGetters('userInfo', ['loginStatus'])
  },
  created() {
    this.getVideoCollect()
  },
  methods: {
    async getVideoCollect() {
      let { data } = await getVideoCollect()
      //   console.log(data)
      this.videoList = data.data
      this.count = data.data.length
    },
    toDetail(id, type) {
      if (type == 0) {
        this.$router.push('/mvDetail/' + id)
      } else {
        this.$router.push('/VideoDetail/' + id)
      }
    }
  }
}
</script>

<style scoped lang=less>
.video_wrap {
  padding: 1px 30px;
  margin: 0 auto;
}
.title {
  line-height: 50px;
  padding: 0 40px;
  .album_count {
    font-size: 10px;
    font-weight: normal;
    color: rgb(194, 190, 190);
  }
}
.el-col {
  width: 250px;
}
.item {
  margin-bottom: 20px;
  .cover {
    position: relative;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
    .count {
      position: absolute;
      font-size: 8px;
      z-index: 5;
      top: 2%;
      right: 2%;
      color: #fff;
    }
    .el-icon-caret-right {
      font-size: 15px;
    }
    .time {
      position: absolute;
      font-size: 8px;
      z-index: 5;
      bottom: 2%;
      right: 2%;
      color: #fff;
    }
  }
  .title {
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 0;
  }
  .iconMV {
    color: red;
  }
  .name {
    font-size: 10px;
    color: #cfcfcf;
    margin-bottom: 30px;
  }
}
</style>